import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styled from 'styled-components';
import { motion } from 'framer-motion';

const QuestionContainer = styled.div`
  min-height: 100vh;
  background: linear-gradient(135deg, #1a0a2e 0%, #0d0630 100%);
  color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
`;

const Header = styled.h1`
  font-size: 2rem;
  margin-bottom: 30px;
  background: linear-gradient(to right, #9d4edd, #5a189a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
`;

const QuestionBox = styled.div`
  background: rgba(90, 24, 154, 0.2);
  border-radius: 15px;
  padding: 30px;
  width: 100%;
  max-width: 600px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(157, 78, 221, 0.3);
  margin-bottom: 30px;
`;

const QuestionInput = styled.textarea`
  width: 100%;
  min-height: 120px;
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #9d4edd;
  background: rgba(25, 10, 45, 0.7);
  color: white;
  font-size: 1rem;
  resize: vertical;
  
  &:focus {
    outline: none;
    border-color: #e0aaff;
    box-shadow: 0 0 10px rgba(224, 170, 255, 0.5);
  }
`;

const CategoryContainer = styled.div`
  margin: 20px 0;
`;

const CategoryLabel = styled.h2`
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: #e0aaff;
  text-align: center;
`;

const CategoryGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 15px;
`;

const CategoryButton = styled(motion.button)`
  padding: 12px;
  border-radius: 10px;
  border: 1px solid ${(props) => props.selected ? '#e0aaff' : 'rgba(157, 78, 221, 0.5)'};
  background: ${(props) => props.selected ? 'rgba(224, 170, 255, 0.2)' : 'rgba(25, 10, 45, 0.7)'};
  color: ${(props) => props.selected ? '#e0aaff' : '#c77dff'};
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    background: rgba(224, 170, 255, 0.3);
    transform: translateY(-2px);
  }
`;

const PopularQuestionsContainer = styled.div`
  width: 100%;
  max-width: 600px;
  margin-top: 20px;
`;

const PopularQuestionsTitle = styled.h2`
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: #e0aaff;
  text-align: center;
`;

const QuestionList = styled.div`
  display: flex;
  flex-direction: column;
  gap: 10px;
`;

const QuestionItem = styled(motion.div)`
  padding: 15px;
  border-radius: 10px;
  background: rgba(25, 10, 45, 0.7);
  border: 1px solid rgba(157, 78, 221, 0.3);
  cursor: pointer;
  
  &:hover {
    background: rgba(90, 24, 154, 0.3);
    transform: translateX(5px);
  }
`;

const ActionButton = styled(motion.button)`
  padding: 15px 40px;
  font-size: 1.1rem;
  border: none;
  border-radius: 50px;
  background: linear-gradient(45deg, #9d4edd, #5a189a);
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(90, 24, 154, 0.3);
  margin-top: 30px;
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(90, 24, 154, 0.5);
  }
`;

const TarotQuestion = () => {
  const navigate = useNavigate();
  const [question, setQuestion] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('');

  // 问题领域分类
  const categories = [
    { id: 'love', name: '爱情' },
    { id: 'career', name: '事业' },
    { id: 'wealth', name: '财运' },
    { id: 'study', name: '学业' },
    { id: 'general', name: '综合' }
  ];

  // 热门问题模板
  const popularQuestions = [
    { id: 1, category: '爱情', question: '我和TA的未来发展会如何？' },
    { id: 2, category: '事业', question: '我下一步的职业方向是什么？' },
    { id: 3, category: '运势', question: '我本周的整体运势怎么样？' },
    { id: 4, category: '财运', question: '我最近的财运如何？' },
    { id: 5, category: '学业', question: '我适合继续深造还是直接工作？' }
  ];

  const handleCategorySelect = (category) => {
    setSelectedCategory(category);
  };

  const handleQuestionSelect = (selectedQuestion) => {
    setQuestion(selectedQuestion);
    // 自动选择对应的问题领域
    const categoryMap = {
      '爱情': 'love',
      '事业': 'career',
      '财运': 'wealth',
      '学业': 'study',
      '运势': 'general'
    };
    
    const category = categoryMap[selectedQuestion.category] || 'general';
    setSelectedCategory(category);
  };

  const handleContinue = () => {
    if (!question.trim()) {
      alert('请输入您的问题');
      return;
    }
    
    if (!selectedCategory) {
      alert('请选择问题领域');
      return;
    }
    
    // 导航到选牌阵页面，传递问题和领域信息
    navigate('/tarot/spread', { 
      state: { 
        question: question,
        category: selectedCategory
      }
    });
  };

  return (
    <QuestionContainer>
      <Header>请输入您的问题</Header>
      
      <QuestionBox>
        <QuestionInput
          placeholder="例如：我和TA的未来发展会如何？"
          value={question}
          onChange={(e) => setQuestion(e.target.value)}
        />
        
        <CategoryContainer>
          <CategoryLabel>选择问题领域</CategoryLabel>
          <CategoryGrid>
            {categories.map((category) => (
              <CategoryButton
                key={category.id}
                selected={selectedCategory === category.id}
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                onClick={() => handleCategorySelect(category.id)}
              >
                {category.name}
              </CategoryButton>
            ))}
          </CategoryGrid>
        </CategoryContainer>
      </QuestionBox>
      
      <PopularQuestionsContainer>
        <PopularQuestionsTitle>热门问题模板</PopularQuestionsTitle>
        <QuestionList>
          {popularQuestions.map((item) => (
            <QuestionItem
              key={item.id}
              whileHover={{ x: 10 }}
              whileTap={{ scale: 0.98 }}
              onClick={() => handleQuestionSelect(item)}
            >
              <strong>{item.category}：</strong> {item.question}
            </QuestionItem>
          ))}
        </QuestionList>
      </PopularQuestionsContainer>
      
      <ActionButton
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
        onClick={handleContinue}
      >
        继续
      </ActionButton>
    </QuestionContainer>
  );
};

export default TarotQuestion;